import React, { useRef } from 'react';
import { Tooltip, Progress } from 'antd';

const LearningPage = () => {
  const progressRef = useRef(null);
  const [progress, setProgress] = React.useState({
    overallProgress: 0,
    // 其他进度状态...
  });

  // 模拟进度更新
  React.useEffect(() => {
    // 这里应该是获取实际进度的逻辑
    const timer = setTimeout(() => {
      setProgress({
        overallProgress: 75, // 示例进度值
      });
    }, 1000);

    return () => clearTimeout(timer);
  }, []);

  const renderProgressOverview = () => {
    return (
      <div ref={progressRef}>
        <Tooltip
          title={`已完成 ${Math.round(progress.overallProgress)}%`}
          getPopupContainer={() => progressRef.current}
        >
          <Progress
            type="circle"
            percent={progress.overallProgress}
            width={80}
            strokeColor={{
              '0%': '#108ee9',
              '100%': '#87d068',
            }}
          />
        </Tooltip>
      </div>
    );
  };

  return (
    <div className="learning-page">
      <h2>学习进度</h2>
      {renderProgressOverview()}
      {/* 其他学习内容... */}
    </div>
  );
};

export default LearningPage;